HJS
AboutPostsProjects

CSS 클래스 네이밍 원치과 BEM 방법론

1️⃣ 클래스 네이밍이 중요한 이유

CSS 클래스는 스타일을 정의하는 기본 다위이며, 우리가 가장 자주 사용하는 선택자입니다. 특히 재사용 가능한 스타일을 만들기 위해선 클래스 이름 하나에도 신중을 기해야 합니다.


🔹 좋은 클래스 이름의 조건

예를 들어 .title-blue는 "파란 타이틀" 이라는 의미지만, 만약 색상이 바뀌면 클래스 이름도 수정해야 하고, 이는 유지보수를 어렵게 만듭니다.


2️⃣ 클래스 명명 규칙 - keba-case

클래스 이름은 다음 규칙을 따르는 것이 좋습니다.


/* 좋은 예 */
.page-title
.main-header

/* 나쁜 예 */
.pageTitle
main_header

3️⃣ BEM이란?

BEM(Block, Element, Modifier) 은 CSS 클래스 명명 방법론 중 하나로, 구조적이고 일관된 네이밍 체계를 통해 유지보수성과 협업 효율을 높여줍니다. 특히 프로젝트 규모가 커질수록 클래스 이름이 겹치거나, 예상치 못한 스타일 충돌이 발생하기 쉬운데, BEM은 이런 문제를 미연에 방지할 수 있습니다.


🔹 구성 요소

구분의미예시
Block독립적인 UI 단위.button, .navbar, .card
ElementBlock 내부 구성 요소.button__icon, .card__title
Modifier상태나 변형.button--primary, .card--large

🔹 명명 규칙


4️⃣ 예제 코드

<button class="button button--primary">
  <span class="button__icon"></span>
  Click me
</button>

<style>
.button {
  background-color: gray;
  color: white;
  padding: 10px 20px;
  border: none;
}

.button__icon {
  margin-right: 5px;
}

.button--primary {
  background-color: blue;
}
</style>

👀 코드 해석


5️⃣ 실무 적용 예시

.main-header {}                /* 블록 */
.main-header__brand {}         /* 블록의 하위 요소 */
.toggle-button {}              /* 또 다른 블록 */
.toggle-button__bar {}         /* 요소 */
.main-nav__item--cta {}        /* 수정자 - 행동 유도 버튼 */

✔️ 이처럼 BEM 구조로 클래스명을 작성하면, 요소의 역할과 위치를 쉽게 파악할 수 있고, 이름이 겹치는 문제를 방지할 수 있습니다.


6️⃣ BEM의 장점과 주의사항

✅ 장점


⚠️ 주의할 점